<template>
  <div class="joys-user-secure-conf">
    <div class="joys-user-secure-conf__title">
      账户安全模块为你提供帐户安全的相关内容，你在该模块可以修改帐户相关密码、安全设置类信息。
    </div>
    <el-tabs v-model="activeName" type="border-card">
      <el-tab-pane label="安全设置" name="safetySet">
        <div class="info_box">
          <span>登陆密码</span>
          <span>建议使用混合大、小写字母、符号及数字的高强度密码，并定期修改密码，以保护账户安全。</span>
          <div class="operationBox">
            <p class="alter" @click="updataPassword">修改</p>            
            <P>|</P>
            <p>已启动</p>
            <i></i>
          </div>

        </div>
      </el-tab-pane>
      <el-tab-pane label="修改密码" name="pwd">
        <el-form  status-icon  label-width="150px" class="from">
          <el-form-item    class="label" label="当前密码" >
            <el-input class="input"  v-model.lazy="originalPwd"></el-input>
            <span v-if="originalPwdsHint">{{originalPwds.errorText}}</span>
          </el-form-item>
          <el-form-item  class="label" label="输入新密码" >
            <el-input  class="input" type="password" v-model.lazy="newPassword" ></el-input>
            <span v-if="newPasswordsHint" >{{newPasswords.errorText}}</span>
          </el-form-item>
          <el-form-item prop='repassword' class="label" label="再次输入新密码" >
            <el-input  class="input" type="password" v-model.lazy="newPwd"></el-input>
            <span>{{newPwds.errorText}}</span>
          </el-form-item>
          <el-form-item>
            <button class="btn" ref="opacitybox"  @click="submitForm()">保存</button>
          </el-form-item>
        </el-form>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
  export default {
     name: "SecureConf",
    data() {
      return {
        activeName:"safetySet",
        
        originalPwd: '',
        newPassword:'',
        newPwd: '',      
        originalPwdsHint:false,
        newPasswordsHint:false,

        userId:"000",
        headers:{
              'Content-Type': 'multipart/form-data',
              'AUTH-TOKEN': localStorage.getItem('AUTH-TOKEN'),
              'Accept': 'application/json',
        },
      
      };
    },
    methods: {
      updataPassword(){
        // name.pwd
        this.activeName= "pwd"
      },
      submitForm() {
        this.$axios({
  				method: 'post',
  				url: '/joys-rest/joys-master-data/users/changePwd/'+this.userId,
  				headers:{
  					  'Content-Type': 'application/json',
              'AUTH-TOKEN': localStorage.getItem('AUTH-TOKEN'),
              'Accept': 'application/json',
           },
          //  params: {
          //     userId:this.userId,
              
          //     // pwd,
				  //   },
  			 	data: {	             	
            "originalPwd": this.originalPwd,
            "newPwd": this.newPwd,
  			 	}
  			}).then((res)=>{
          console.log(res);
          // console.log(this.imageBase)
          this.$message({
            message:'修改成功'
          })
        }).catch(error=>{
          this.$message.error('修改失败,请稍后重试')
        })
      },


    },
    watch:{
      originalPwd(){
        this.originalPwdsHint =true
      },
      newPassword(){
        this.newPasswordsHint = true
      },
    },
    computed:{
      originalPwds() {
          var errorText;
          if(!/^[0-9A-Za-z]{6,15}$/.test(this.originalPwd)) {
              errorText = '密码少于6位'
              
          } else {
              errorText = ''
          }
          return {
              errorText
          }
      },   
      newPasswords() {
          var errorText;
          if(!/^[0-9A-Za-z]{6,15}$/.test(this.newPassword)) {
              errorText = '密码少于6位'
          } else {
              errorText = ''
          }
          return {
              errorText
          }
      },
      newPwds() {
          var errorText;
          if(!/^[0-9A-Za-z]{6,15}$/.test(this.newPwd)) {
              errorText = '密码少于6位'
          }else if(this.newPassword !==this.newPwd ){
              errorText = '两次密码不匹配'
          }
          else {
              errorText = ''
          }
          
          if(!this.passwordFlag) {
              errorText = ''
              this.passwordFlag = true
          }
          return {
              errorText
          }
      }
    }
    
  }
</script>

<style>
  .joys-user-secure-conf .el-tabs--border-card > .el-tabs__header {
    background-color: #E4E8EB;
  }
  .joys-user-secure-conf .info_box{
    margin: 21px 40px 40px 45px;
    padding: 30px 0px;
    border-bottom: #FFFFFF;
    box-shadow: inset 0 -1px 0 0 rgba(217,217,217,0.50);
  }
  .joys-user-secure-conf .info_box span{
    opacity: 0.7;
    font-family: PingFangSC-Regular;
    font-size: 15px;
    color: #001616;
    padding-right: 96px;
    padding-left: 10px;
  }
  .joys-user-secure-conf .info_box .operationBox{
    float: right;
  }
  .joys-user-secure-conf .info_box .operationBox p{
    float: right;
    margin-left: 15px;
    display:block;
    text-align:right;
    font-family: PingFangSC-Regular;
    font-size: 14px;
    color: #04732D;
    line-height: 16px;
  }
   .joys-user-secure-conf .info_box .operationBox p:nth-last-child(4){
   color: #0369E8
 }
 .operationBox i{
   display: block;
   width: 18px;
   height: 18px;
   background: url(../../static/img/suo.png) no-repeat center center;
   background-size: 100% 100%;
   margin-left: -15px;
 }
 
  .alter{
    cursor: pointer;
  }

  .joys-user-secure-conf__title {
    height: 40px;
    line-height: 40px;
    background-color: #E4E8EB;
    padding: 0 20px;
  }
  .from {
    margin-top: 33px;
    margin-left: 100px;
  }
  .from  {
    margin-bottom:28px;
  }
  .from  label{
    display: inline-block;
    width:112px;
    height:32px;
    font-size: 14px;
    color: #001616;
    letter-spacing: 0;
    text-align: right;
    line-height: 32px;
    font-weight: 700;
  }
  .from .label span{
    margin-left: 10px;
    color: red;

  }
  .from  .input{
    
    width:248px;
    height:32px;
    background: #FFFFFF;
    border-radius: 2px;
    margin-left:16px;
    padding-left: 8px;
  }
  .btn{
    width:44px;
    height:28px;
    color:#fff;
    background:#001616;
    text-align: center;
    line-height: 28px;
    border:none;
    border-radius: 2px;
    margin: 28px 0 53px 25px;
    cursor:pointer;
    opacity: 0.3;
  }
  .is-active{
    color: #000!important;
    font-weight: 700;
  }
  .el-tabs__item:hover{
    color: #000!important;
  }
  .el-form-item__error{
    position: absolute;
    top: 20%;
    left: 300px;
  }
  .el-tabs__item{
    color: #3A3F4E!important;
  }
</style>
